<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
            body {
                height: 100vh;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: rgb(11, 12, 26);
            }
            .face {
                width: 200px;
                height: 200px;
                border-radius: 50%;
                background: linear-gradient(180deg, rgb(252, 207, 5), rgb(255, 240, 36));
                position: relative;
                box-shadow: inset 0 0 3px rgb(15, 15, 9), inset 0 0 5px rgb(15, 15, 9);
            }
            /* 用双伪类定义嘴巴 */
            .face::after {
                content: '';
                position: absolute;
                bottom: 12%;
                left: 50%;
                transform: translateX(-50%);
                width: 90px;
                height: 40px;
                background-color: rgb(255, 199, 45);
                border-radius: 0 0 70px 70px;
                box-shadow: inset 0 0 5px rgb(53, 53, 53);
            }
            .eye {
                position: absolute;
                width: 60px;
                height: 60px;
                border-radius: 50%;
                background-color: #fff;
                box-shadow: inset 0 0 5px rgb(58, 58, 58);
            }
            /* 用双伪类定义眼球，宽高，角度，阴影等 */
            .eye::after {
                content: '';
                position: absolute;
                top: 50%;
                left: 5%;
                transform: transLateY(-50%);
                width: 50%;
                height: 50%;
                background-color: #000;
                border-radius: 50%;
                box-shadow: inset 0 0 3px white, inset 0 0 5px white;
            }
            .face .eye:nth-child(1) {
                top: 26%;
                left: 12%;
            }
            .face .eye:nth-child(2) {
                top: 26%;
                right: 12%;
            }
        </style>
    </head>
    <body>
        <div class="face">
            <div class="eye"></div>
            <div class="eye"></div>
        </div>

        <script>
            // 通过鼠标位置给眼睛设置对应的旋转rotate角度
            var eye = document.querySelectorAll('.eye'); /* 获取眼睛元素 */
            window.addEventListener('mousemove', function (event) {
                /* 给页面绑定鼠标移动事件 */ eye.forEach(function (eye) {
                    let angle = Math.atan2(event.pageX - eye.getBoundingClientRect().left - eye.clientLeft / 2, event.pageY - eye.getBoundingClientRect().top - eye.clientTop / 2);
                    let rot = ((angle * 180) / Math.PI) * -1 - 90;
                    eye.style.transform = `rotate(${rot}deg)`;
                });
            });

            /* 
            Math.atan2(…）方法，他能返回某坐标相对于X轴的弧度。
            event.pageX 鼠标相对于页面左侧距离。
            event.pageY 鼠标相对于页面顶侧距离。
            eye.getBoundingClientRect().left 眼睛相对于页面左侧距离。
            eye.getBoundingClientRect().top 眼睛相对于页面顶侧距离。
            eye.clientLeft 眼睛左边框宽度。
            eye.clientTop 眼睛上边框宽度。
            弧度换成角度：弧度 ×180/3.14=角度*
            所以得到应该旋转角度：
            angle * 180 / Math.PI * -1 - 90
            Math.PI就是π
            */
        </script>
    </body>
</html>
